<template>
  <a-spin :spinning="pageLoading">
    <a-form-model class="detail-form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="头像">
        <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="Util.getUploadImagePath()"
            :before-upload="beforeUpload"
            @change="handleChange"
        >
          <img v-if="form.image" :src="form.image" alt="avatar" style="width:80px;height: 80px"/>
          <span v-else>
            <a-icon type="plus"/>
            <span class="ant-upload-text">
              Upload
            </span>
          </span>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="姓名">
        <a-input allowClear v-model="form.name"/>
      </a-form-model-item>
      <a-form-model-item label="年龄">
        <a-input allowClear v-model="form.age"/>
      </a-form-model-item>
      <a-form-model-item label="性别">
        <a-select allowClear placeholder="选择状态" v-model="form.sex">
          <a-select-option :value="v.id" v-for="(v, i) in Config.Sex.filter(i => {return i.id < 3})" :key="i">{{
              v.title
            }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="工作状态">
        <a-select allowClear placeholder="选择状态" v-model="form.workState">
          <a-select-option :value="v.id" v-for="(v, i) in Config.jobState" :key="i">{{ v.title }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="求职城市">
        <a-cascader :options="Config.cityOptions" placeholder="请选择" v-model="form.cityId"/>
      </a-form-model-item>
      <a-form-model-item label="求职意向">
        <a-cascader :options="Config.jobOptions" placeholder="请选择" v-model="form.position"/>
      </a-form-model-item>
      <a-form-model-item label="期望薪资">
        <a-input allowClear v-model="form.money" placeholder="示例：10K-18K 或者 面议"/>
      </a-form-model-item>
      <a-form-model-item label="发布者">
        <a-select allowClear placeholder="请选择" v-model="form.userId">
          <a-select-option :value="v.id" v-for="(v, i) in userList" :key="i">{{ v.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="顾问点评">
        <a-input allowClear v-model="form.evaluate"/>
      </a-form-model-item>
      <a-form-model-item
          v-for="(work, index) in form.workList"
          :key="work.key"
          :label="'工作经历' + (index + 1)"
      >
        <a-input style="width: 49%; margin-right: 2%" v-model="work.title" placeholder="请输入公司名"></a-input>
        <a-input style="width: 49%" v-model="work.department" placeholder="请输入所属部门"></a-input>
        <a-cascader style="width: 18%; margin-right: 2%" v-model="work.position" :options="Config.jobOptions" placeholder="请选择职位"/>
        <a-input style="width: 80%" v-model="work.time" placeholder="请输入在职时间，请严格按照示例填写（示例：2018-11/2021-01）"></a-input>
        <a-input style="width: 100%" v-model="work.content" placeholder="请输入工作内容"></a-input>
        <a-icon
            v-if="form.workList.length > 1"
            class="dynamic-delete-button"
            type="minus-circle-o"
            :disabled="form.workList.length === 1"
            @click="removeDomain(work)"
        />
      </a-form-model-item>
      <a-form-model-item label="新增工作经历">
        <a-button type="dashed" style="width: 60%" @click="addDomain">
          <a-icon type="plus"/>
          新增工作经历
        </a-button>
      </a-form-model-item>
      <a-form-model-item
          v-for="(study, index) in form.studyList"
          :key="study.key"
          :label="'学习经历' + (index + 1)"
      >
        <a-input style="width: 49%; margin-right: 2%" v-model="study.title" placeholder="请输入学校名称"></a-input>
        <a-select style="width: 49%"  allowClear placeholder="请选择学历" v-model="study.edu">
          <a-select-option :value="v.id" v-for="(v, i) in Config.edu" :key="i">{{ v.title }}</a-select-option>
        </a-select>
        <a-input v-model="study.time" placeholder="请输入学习时间，请严格按照示例填写（示例：2010-09/2014-06）"></a-input>
        <a-icon
            v-if="form.studyList.length > 1"
            class="dynamic-delete-button"
            type="minus-circle-o"
            :disabled="form.studyList.length === 1"
            @click="removestudy(study)"
        />
      </a-form-model-item>
      <a-form-model-item label="新增学习经历">
        <a-button type="dashed" style="width: 60%" @click="addstudy">
          <a-icon type="plus"/>
          新增学习经历
        </a-button>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
        <a-button type="primary" @click="onSubmit"> 提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>
<script>

import config from "../../tools/config";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  data() {
    return {
      // 公用配置
      Config: {},
      pageLoading: false,
      uploadLoading: false,
      labelCol: {span: 5},
      wrapperCol: {span: 14},
      userList: [],
      form: {
        workList: [],
        studyList: [],
        image: '',
        name: '',
      },
    };
  },
  created() {
    this.Config = config
    this.getUserList()
  },
  methods: {
    moneyToParam (money){
      if (!money) { return ['', ''] }
      if (money === '面议') {
        return [0,0]
      }
      const money1 = money.split('-')
      const money2 = money1.map(i => {
        const b = i.slice(0, i.length - 1)
        return b
      })
      return money2
    },
    getUserList() {
      this.Http.get("/admin/user/getAllList", {type: 1}).then(res => {
        if (res.code == 1) {
          this.userList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 提交更新
    onSubmit() {
      this.form.cityId = this.form.cityId[this.form.cityId.length - 1]
      this.form.position = this.Config.jobOptions.filter(o => {
        return o.value === this.form.position[0]
      })[0].children.filter(t => {
        return t.value === this.form.position[1]
      })[0].label
      this.form.startMoney = this.moneyToParam(this.form.money)[0]
      this.form.endMoney = this.moneyToParam(this.form.money)[1]
      this.form.joblist = JSON.stringify(this.form.workList.map(i => {
        return {
          title: i.title,
          start: i.time.split('/')[0],
          end: i.time.split('/')[1],
          position: this.Config.jobOptions.filter(o => {
            return o.value === i.position[0]
          })[0].children.filter(t => {
            return t.value === i.position[1]
          })[0].label,
          department: i.department,
          content: i.content
        }
      }))
      this.form.studylist = JSON.stringify(this.form.studyList.map(i => {
        return {
          title: i.title,
          start: i.time.split('/')[0],
          end: i.time.split('/')[1],
          edu: i.edu
        }
      }))
      this.Http.post("/admin/resume/create", this.form).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            location.reload()
          }, 1500)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 上传
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.form.image = info.fileList[0].response.data.path;
        this.uploadLoading = false;
      }
    },

    // 上传前检测格式和大小
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },

    addDomain() {
      this.form.workList.push({
        title: "",
        department: "",
        position: "",
        time: "",
        content: "",
      });
    },
    removeDomain(item) {
      let index = this.form.workList.indexOf(item);
      if (index !== -1) {
        this.form.workList.splice(index, 1);
      }
    },
    addstudy() {
      this.form.studyList.push({
        title: "",
        time: "",
        edu: "",
      });
    },
    removestudy(item) {
      let index = this.form.studyList.indexOf(item);
      if (index !== -1) {
        this.form.studyList.splice(index, 1);
      }
    },
  },
};
</script>
